<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat App</title>
    <link rel="stylesheet" href="{{ url_for("static",filename="css/chat.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="bootstrap/bootstrap.4.6.min.css") }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="/chat">智能客服</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item ml-2">
                </li>
            </ul>
            <ul class="navbar-nav">
                {% if user %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.profile") }}">{{ user.username }}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.logout") }}">退出登录</a>
                    </li>
                {% elif not user %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.login") }}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.register") }}">注册</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <!-- 中间的对话框 -->
    <div class="chat-box">
        <div class="chat-messages" id="chat-messages">
            <!-- 对话记录将在这里显示 -->
        </div>
        <form id="chat-form">
            <input type="text" id="user-input" placeholder="Type your message...">
            <button type="submit">Send</button>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('chat-form'); // 使用正确的ID
    var messagesDiv = document.getElementById('chat-messages');
    var submitButton = form.querySelector('button[type="submit"]');
    var userId = {{ session.user_id if session.user_id else 'null' }}; // 获取用户ID

    // 当表单提交时触发
    form.addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var userInput = document.getElementById('user-input').value.trim();
        if (userInput === '') return; // 如果输入为空，则不发送

        // 锁定提交按钮，防止连续发送
        submitButton.disabled = true;

        // 用户的头像URL
        var userAvatarUrl = "{{ url_for('static', filename='img/user-avatar.jpg') }}"; // 使用正确的文件名

        // 将用户消息添加到聊天记录中，使用消息气泡样式
        var userMessageContainer = createMessageContainer('user', userInput, userAvatarUrl);
        messagesDiv.appendChild(userMessageContainer);

        // 清空输入框
        document.getElementById('user-input').value = '';

        // 滚动到底部
        scrollToBottom();

        // 使用fetch API发送请求到后端
        fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({message: userInput})
        })
            .then(response => response.json())
            .then(data => {
                // 机器人的头像URL
                var botAvatarUrl = "{{ url_for('static', filename='img/bot-avatar.jpg') }}"; // 使用正确的文件名

                // 将回复添加到聊天记录中，使用消息气泡样式
                var botResponseContainer = createMessageContainer('bot', data.response, botAvatarUrl);
                messagesDiv.appendChild(botResponseContainer);

                // 解锁提交按钮
                submitButton.disabled = false;

                // 再次滚动到底部
                scrollToBottom();
            })
            .catch(error => {
                console.error('Error:', error);
                // 解锁提交按钮，在出错情况下
                submitButton.disabled = false;
            });
    });

    function createMessageContainer(sender, text, avatarUrl) {
        var container = document.createElement('div');
        container.className = `message-container ${sender}`;

        // 添加头像
        var avatar = document.createElement('img');
        avatar.src = avatarUrl;
        avatar.className = 'avatar';

        // 添加消息文本
        var messageText = document.createElement('div');
        messageText.className = 'message-bubble ' + sender;
        messageText.innerHTML = `
            <p>${text}</p>
            <small class="time-stamp">${new Date().toLocaleTimeString()}</small>
        `;

        // 组合头像和消息文本
        if (sender === 'user') {
            // 用户头像放在消息文本的右边
            container.appendChild(messageText); // 先添加消息文本
            container.appendChild(avatar); // 再添加头像
        } else {
            // 机器人头像放在消息文本的左边
            container.appendChild(avatar); // 先添加头像
            container.appendChild(messageText); // 再添加消息文本
        }

        return container;
    }

    // 显示聊天记录
    function displayChatHistory(data) {
        const chatMessagesDiv = document.getElementById('chat-messages');

        data.forEach(record => {
            const userMessageDiv = createMessageContainer('user', record.user_input, "{{ url_for('static', filename='img/user-avatar.jpg') }}");
            const modelResponseDiv = createMessageContainer('bot', record.model_response, "{{ url_for('static', filename='img/bot-avatar.jpg') }}");
            chatMessagesDiv.appendChild(userMessageDiv);
            chatMessagesDiv.appendChild(modelResponseDiv);
        });

        // 滚动到底部
        scrollToBottom();
    }

    // 滚动到底部的函数
    function scrollToBottom() {
        const messagesDiv = document.getElementById('chat-messages');
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    }

    // 页面加载时获取聊天记录
    if (userId !== 'null') {
        fetchChatHistory(userId).then(() => {
            scrollToBottom(); // 在获取聊天记录后滚动到底部
        });
    }

    // 获取聊天记录并显示
    async function fetchChatHistory(user_id) {
        try {
            const response = await fetch(`/get_chat_history/${user_id}`);
            const data = await response.json();
            displayChatHistory(data);
        } catch (error) {
            console.error('Error fetching chat history:', error);
        }
    }
});
</script>
</body>
</html>